import React from 'react'

import './TeamInjure.css'
import {ICON_URL_PREFIX} from "../../../../../../../redux/game";


const iconUrlPrefix = 'http://cdn.sportnanoapi.com/football/player/'

const TeamInjure = props => {

    const {
        team,
        injureList,
    } = props


    const iconTemplate = (
        <div className='flex-center-align-center'>
            <img
                src={`${ICON_URL_PREFIX}/${team.logo}`}
                alt=''
                style={{width: '20px', marginRight: '6px',}}
            />
            <p>{team.name_zh}</p>
        </div>
    )

    const tableHead = <div className='flex-space-between-align-center' style={{padding: '4px',}}>
        <div className='injure-table-first-col'>
            <span className='appendix-text'>球员</span>
        </div>
        <div className='injure-table-second-col'>
            <span className='appendix-text'>位置</span>
        </div>
        <div className='injure-table-third-col'>
            <span className='appendix-text'>受伤情况</span>
        </div>
    </div>

    let injuryListTemplate

    if (injureList && injureList.length === 0) {
        injuryListTemplate = <div style={{textAlign: 'center', padding: 4,}}><p>暂无数据或无伤病</p></div>
    } else {
        injuryListTemplate = injureList && injureList.map(player => {

            const {
                id,
                name,
                position,
                logo,
                reason,

            } = player

            return <div
                key={id}
                className='flex-space-between-align-center injure-table-row'
            >
                <div className='flex-align-center injure-table-first-col'>
                    <div style={{width: '24px', height: '24px', marginRight: '8px',}}>
                        <img alt='' src={iconUrlPrefix + logo} style={{height: '24px',}}/>
                    </div>
                    <span>{name}</span>
                </div>
                <div className='injure-table-second-col'>
                    <span>{position}</span>
                </div>
                <div className='injure-table-third-col'>
                    <span>{reason}</span>
                </div>
            </div>

        })
    }




    return <>
        {iconTemplate}
        <div
            className='injure-table'
        >
            {tableHead}
            {injuryListTemplate}
        </div>

    </>

}

export default TeamInjure
